<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title></title>
        <style type="text/css">

        #my-container{

           

            display:flex;
            /*
                flex布局有两个方向：主轴和交叉轴，若水平轴为主轴，则交叉轴为纵轴，反之亦然。
                flex布局中的元素按主轴排列
            */

            flex-direction:row; /*指定主轴方向row/column*/
            flex-wrap:wrap; /*主轴方向排列不下时，是否换行*/

            flex-grow: 1;/*自动扩大占用空余空间*/
            flex-shrink: 1;/*自动缩小适应空间*/

            justify-content: center;/*主轴方向的对齐方式*/
            align-items:center; /*交叉轴方向的对齐方式*/

        }

        .my-item{

            box-sizing: border-box;

            width:29%;
            height:100px;
            border:1px solid red;

            margin:10px;

            display:flex;
            flex-direction: column;
            justify-content: center;/*主轴方向的对齐方式*/
            align-items:center; /*交叉轴方向的对齐方式*/




        }

        .my-item>img{
            width:50px;
        }

        .my-item>div{
            margin-top:10px;
        }
           
        </style>
    </head>
    <body>
       
        <!-- flex布局 -->

        <div id="my-container">

            <div class="my-item">

                <img src="images/home.jpg"/>

                <div>文字信息</div>


            </div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>

            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            <div class="my-item"></div>
            
            

        </div>



    </body>

</html>